<script setup lang="ts">
import ApexCharts from "apexcharts";
import { useAttrs } from "vue";

const attr = useAttrs();
console.log("attr.remoteData", attr.remoteData);
const series = [
  attr.remoteData.length ? attr.remoteData[attr.remoteData.length - 1] : 0,
  attr.remoteData.length ? 100 - attr.remoteData[attr.remoteData.length - 1] : 100
];
const pageData = {
  series,
  chartOptions: {
    chart: {
      width: 380,
      type: "pie"
    },
    labels: ["使用", "空闲"],
    colors:["rgb(48, 50, 63)","#a30c0c"],
    tooltip: {
      y: {
        formatter: function (val, opt) {
          return  val + "%";
        }
      }
    },
    dataLabels: {
      enabled: true, // 启用数据标签
      formatter: function (val, opts) {
        return opts.w.globals.labels[opts.seriesIndex] + ": " + val + "%"; // 自定义标签格式
      },
    },
    legend: {
      show: false // 禁用数据标签
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          legend: {
            position: "bottom",
            enabled: false // 禁用数据标签
          }
        }
      }
    ]
  }
};
</script>
<template>
  <div>
    <h3 style="margin: 0px">磁盘</h3>
    <apexchart width="100%" height="350px" type="pie" :options="pageData.chartOptions" :series="pageData.series"></apexchart>
  </div>
</template>

<style scoped></style>
